<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" >

    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left">
                <comps:miPanel />
            </ui:define>

            <ui:define name="principal">

                <div style="margin: 0 30px">
                    <h:form>

                        <p:dataTable value="#{misPagosBean.pagos}" var="pago"
                                     paginator="true" rows="20" paginatorPosition="bottom" paginatorAlwaysVisible="false"
                                     rowStyleClass="#{pago.estado == 'INICIADO' ? 'filaAmarilla' : null}"
                                     emptyMessage="No se ha registrado ningun pago." >
                            <p:column headerText="Fecha iniciado" >
                                <h:outputText value="#{pago.fechaIniciado}" >
                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                </h:outputText>
                            </p:column>

                            <p:column headerText="Fecha confirmado" >
                                <h:outputText value="#{pago.fechaConfirmado}" >
                                    <f:convertDateTime pattern="dd/MM/yyyy HH:mm" />
                                </h:outputText> 
                            </p:column>

                            <p:column headerText="Monto" >
                                <h:outputText value="#{pago.monto}" />
                            </p:column>

                            <p:column headerText="Medio de pago" >
                                <h:outputText value="#{pago.tipoPago}" />
                            </p:column>

                            <p:column headerText="Servicio" >
                                <h:outputText value="#{pago.tipoServicio.toString()}" />
                            </p:column>
                        </p:dataTable>

                    </h:form>
                </div>
            </ui:define>

        </ui:composition>

    </body>
</html>
